<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue插槽(slot)</title>
    <style type="text/css" media="screen">
    .childbox {
        color: #f36;
    }
    .childbox .header {
        color: yellow;
    }
    </style>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!--
   1： vue的插槽：功能是父组件向子组件插入dom元素，
    使用场景：插槽插入子组件的dom标签，称为插槽，而插槽的内容不是子组件决定的而是父组件根据业务需求传递过来的，如下面，child标签里传入的内容就是为插槽，一定要为插槽起名，如slot='header',以便在子组件的相应位置来应用；
    相当于向子组件中传入dom
:   2： slot标签里面也可以定义默认值，如在<slot name='header'>里面定义下面默认dom值，如果插槽header有值则会显示传入的值，如果没有值该区域就会显示定义的默认值
    3：在子元素的插槽slot时外层要用div容器包裹，否则会报错；
    4：给每个插槽起名，slot，，slot='header'；在子组件中name='header'引用
        -->
    <div class="app">
        <bodycon>
            <!-- 具名插槽 -->
            <div class="header" slot='header'>header</div>
            <div class="footer" slot='footer'>footer</div>
        </bodycon>
    </div>
    <script type="text/javascript">
    Vue.component("bodycon", {
        template: "<div><slot name='header'></slot><div class='content'>content</div><slot name='footer'></slot></div>"
    });

    var vm = new Vue({
        el: ".app"
    });
    </script>
</body>

</html>